<template>
  <div class="header">
    <el-row  :gutter="20" style="display: flex;position:fixed; top: 0;width: 100%;border-bottom:1px solid #cccccc;background-color: #FFFFFF;justify-content: center;line-height: 50px">
      <el-col :span="2"><div class="grid-content bg-purple" :class="{active: cont === 0}" @click="onChangePage('/labelPage',0)">首页</div></el-col>
      <el-col :span="2"><div class="grid-content bg-purple" :class="{active: cont === 1}" @click="onChangePage('/',1)">沸点</div></el-col>
      <el-col :span="2"><div class="grid-content bg-purple">资讯</div></el-col>
      <el-col :span="2"><div class="grid-content bg-purple">小册</div></el-col>
      <el-col :span="2"><div class="grid-content bg-purple">活动</div></el-col>
      <el-col :span="5"><div class="grid-content bg-purple"><el-input  placeholder="请输入内容"></el-input></div></el-col>
      <el-col :span="3"><div class="grid-content bg-purple"><el-button type="primary" plain>个人中心</el-button></div></el-col>
      <el-col :span="2"><div class="grid-content bg-purple"><el-button type="primary">写文章</el-button></div></el-col>
    </el-row>
    <el-col>
      <div class="line-left-right">

      </div>
    </el-col>

    <router-view />
  </div>
</template>

<script>
// import labelPage from "./labelPage";
export default {
  components:{
   // labelPage
  },
  data() {
    return {
      cont: 0
    };
  },
  methods: {
    onChangePage(url,cont) {
      this.$router.push(url)
      this.cont = cont
    }
  },
}
</script>

<style scoped>
.active{
  color: red;
}
.header{

  background-color: #f4f5f5;
}
.header el-row{
  height: 50px;
}
.line-left-right{
  width: 100%;
  height: 1px;
  background-color: #d0d0d0;
}

li{
  list-style-type: none;
}

</style>